<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('修改院校')}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <style>
        .binding-input span{
            margin: 0 5px;
            color: #5bc0de;
        }
        .select-hide{
            display: none;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-3">
    <!-- Main content -->
    <div class="card mt-2">
        <div class="card-header border-0">
            <h3 class="card-title" th:text="${colleges.id > 0?'修改院校':'添加院校'}"></h3>
            <div class="card-tools"></div>
        </div>
        <div class="card-body">
            <form class="form-horizontal m" id="form-book-edit" th:object="${colleges}">
                <input id="teacherIdArr" name="teacherIdArr"  type="hidden"/>
                <input id="bookId" name="id" th:field="*{id}" type="hidden">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">学校名称</label>
                    <div class="col-sm-6">
                        <input id="title" name="name" th:field="*{name}" class="form-control" type="text" placeholder="请输入学校名称" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">地区</label>
                    <div class="col-sm-2">
                        <select name="provinceId" id="provinceId" class="form-control m-b" onchange="provinceClick()">
                            <option value="0">省份</option>
                            <option th:each="province:${provinces}" th:value="${province.id}" th:text="${province.name}" th:selected="${province.id == areaFull.provinceId}"></option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <select name="cityId" id="cityId" class="form-control m-b" onchange="cityClick()">
                            <option value="0">城市</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <select name="areaId" id="areaId" class="form-control m-b">
                            <option value="0">县/区</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">详细地址</label>
                    <div class="col-sm-6">
                        <input id="address" name="address"  th:value="*{address}" class="form-control" placeholder="请输入院校详细地址" type="text" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">等级</label>
                    <div class="col-sm-2">
                        <select name="levelId" id="levelId" class="form-control m-b">
                            <option value="0" th:selected="${colleges.levelId == 0}">普通</option>
                            <option value="1" th:selected="${colleges.levelId == 1}">认证</option>
                            <option value="2" th:selected="${colleges.levelId == 2}">合作</option>
                            <option value="3" th:selected="${colleges.levelId == 3}">战略合作</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">简介</label>
                    <div class="col-sm-6">
                        <textarea id="intro" name="intro" th:text="*{intro}" style="min-height: 100px" class="form-control"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">封面</label>
                    <div class="col-sm-4">
                        <input id="cover" name="cover" th:value="*{cover}"  class="form-control" type="text">
                    </div>
                    <div class="col-sm-5">
                        <label for="cover-upload" class="btn btn-danger"><i class="fa fa-image"></i> 上传图像</label>
                        <label class="btn btn-default" id="view-cover"><i class="fa fa-image"></i> 预览</label>
                        <input type="file" onchange="ImgUpdate()" style="display: none" value="" name="cover-upload" id="cover-upload" accept="image/*"/>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-sm-right">详情</label>
                    <div class="col-sm-9">
                        <input id="context" th:value="*{describe}" name="describe" type="hidden">
                        <div id="editor" class="summernote" th:utext="*{describe}"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">联系人</label>
                    <div class="col-sm-2">
                        <input name="contacts" th:value="*{contacts}" class="form-control" placeholder="院校联系人姓名" type="text">
                    </div>
                    <label class="col-sm-2 col-form-label is-required text-sm-right">联系方式</label>
                    <div class="col-sm-2">
                        <input name="mobile"  th:value="*{mobile}" class="form-control" placeholder="院校联系方式" type="text">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">浏览量</label>
                    <div class="col-sm-2">
                        <input name="viewCount" th:value="*{viewCount}" class="form-control" value="0" type="text" required>
                    </div>
                    <label class="col-sm-2 col-form-label is-required text-sm-right">点赞量</label>
                    <div class="col-sm-2">
                        <input name="likeCount" th:value="*{likeCount}" class="form-control" value="0" type="text" required>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
                    <div class="col-sm-2 pt-2">
                        <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="*{isElite==1}"> 推荐</label>
                        &nbsp; &nbsp;
                        <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="*{isTop==1}"> 固顶</label>
                    </div>
                    <label class="col-sm-2 col-form-label text-sm-right">状态</label>
                    <div class="col-sm-2 pt-2">
                        <label class="radio-box"> <input type="radio" name="status" value="1" th:checked="${colleges.status == 1 || colleges.status == null}" /> 显示 </label>
                        &nbsp; &nbsp;
                        <label class="radio-box"> <input type="radio" name="status" value="0" th:checked="${colleges.status == 0}" /> 隐藏 </label>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-2"></label>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary" onclick="submitSave()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                        <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: summernote-js}" />
<script th:inline="javascript">
    var prefix = "/colleges";
    var provinceId = [[${areaFull.provinceId}]];
    var cityId = [[${areaFull.cityId}]];
    var areaId = [[${areaFull.id}]];

    $(function() {
        $("#form-book-add").validate({
            focusCleanup: true
        });

        $('.summernote').summernote({
            placeholder: '请输入详细介绍',
            height: 192,
            lang: 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });

        $('#view-cover').click(function () {
            var imgSrc = $('#cover').val();
            if (imgSrc.length < 1) {
                layer.msg('图片地址不存在！');
            } else {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    title: false,
                    area: ['60%', '500px'],
                    content: '<img src="' + imgSrc + '" />'
                });
            }
        });

        if(provinceId > 0){
            setChildAreas(provinceId, 'cityId');
            $('#cityId').val(cityId);
        }
        if(cityId > 0){
            setChildAreas(cityId, 'areaId');
            $('#areaId').val(areaId);
        }

    });


    //图片上传
    function ImgUpdate() {
        var file = $('#cover-upload')[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "/upload/temp/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            success: function (result) {
                if (result.code === 0) {
                    $("#cover").val(result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                } else {
                    window.layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }
    //var content = $("#context").val();
    //$('#editor').summernote('code', content);
    // 富文本上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    function provinceClick() {
        var provinceId = $("#provinceId").val();
        $('#cityId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        $('#areaId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        setChildAreas(provinceId, 'cityId');
    };

    function cityClick() {
        var cityId = $("#cityId").val();
        $('#areaId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        setChildAreas(cityId, 'areaId');
    };

    function setChildAreas(pid, objName) {
        if (pid === "0") return;
        $.ajax({
            type: "GET",
            url: "/area/children.json?pid=" + pid,
            dataType: "json", async: false,
            success: function (json) {
                var data = json.data;
                console.log(data)
                var obj = $("#" + objName);
                if (data.length < 1) {
                    obj.append($("<option>").val(pid).text(pid)).val(pid).parent().addClass("select-hide");
                } else {
                    for (i = 0; i < data.length; i++) {
                        obj.append($("<option>").val(data[i].id).text(data[i].name));
                    }
                    obj.parent().removeClass("select-hide");
                }
            },
            error: function (data) {
                layer.msg('error:读取地区数据失败，请重试！', {icon: 2});
            }
        });
    }

    //修改保存
    function submitSave() {
        var sHTML = $('.summernote').summernote('code');
        $("#context").val(sHTML);
        $.modal.loading();
        var data = $("#form-book-edit").serializeArray();
        $.operate.save(prefix + "/save.json",data);
    }


</script>
</body>
</html>